<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-01 09:37:12
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-07-13 09:40:49
 * @Description: 双因子登录页
 -->
<template>
  <div class="login-form-container" :class="{ captcha: showCaptcha }">
    <div style="width: 340px; margin-bottom: 40px; text-align: center">
      <img class="login-logo" src="@/assets/img/login/logo-orange.png" />
    </div>
    <div>
      <fks-row :gutter="32">
        <fks-col :span="24">
          <fks-input
            v-model="reLoginForm.phone"
            class="login-input login-tel"
            :placeholder="LANG.PHONE_TIP"
            readonly
          />
        </fks-col>
      </fks-row>
      <fks-row style="margin-top: 20px" :gutter="32">
        <fks-col :span="24" class="phone_code">
          <fks-input
            v-model="reLoginForm.captcha_code"
            class="login-input login-tel_code"
            type="text"
            maxlength="50"
            :placeholder="LANG.ACCOUNT_CAPTCAH"
            @keyup.native.enter="handleLogin"
          >
            <fks-button
              slot="append"
              type="primary"
              :loading="smsLoading"
              class="getSms"
              @click="getSMSCaptcha"
            >
              <span v-if="countDown != -1 && countDown != -2" class="word">{{
                countDown + 's'
              }}</span>
              <span v-if="countDown != -1 || countDown != -2" class="word">{{
                countDown == -2 ? LANG.GET_CAPTCHA : LANG.REGAIN_CAPTCHA
              }}</span>
            </fks-button>
          </fks-input>
        </fks-col>
      </fks-row>
      <div class="login-button-container">
        <fks-button :loading="loading" type="primary" @click="reHandleLogin">
          {{ LANG.CLICK_LOGIN }}
        </fks-button>
        <fks-button text class="back" @click="goToLogin">
          {{ LANG.BACK_TO_LOGIN }}
        </fks-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getSMSCaptcha } from './api'
import { GRANT_TYPE } from '@/config/enums'
import { uuid } from '@/utils/util'
export default {
  name: 'ReLogin',
  props: {
    data: {
      type: Object,
      default() {
        return {
          phone: ''
        }
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showCaptcha: false,
      reLoginForm: {},
      showResend: false,
      captchaCount: 60,
      countDown: -2,
      smsLoading: false,
      captcha_key: '',
      img_key: '',
      loading: false
    }
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(val) {
        this.reLoginForm.phone = val.phone
      }
    }
  },
  methods: {
    //返回账号登录
    goToLogin() {
      this.$emit('update:visible', false)
    },
    resend() {
      this.showResend = false
    },
    //双因子登录操作
    reHandleLogin() {
      let loginData = this.reGetLoginForm()
      if (loginData.captcha_code && loginData.username) {
        this.loading = true
        this.$store
          .dispatch('userLogin', loginData)
          .then((res) => {
            this.loading = false
            this.redirectTo()
            this.$storage.set('depthId', uuid(16, 32))
          })
          .catch(() => {
            this.loading = false
          })
      } else if (loginData.username) {
        this.$message.error(this.LANG.ACCOUNT_CAPTCAH)
      }
    },
    //登录数据转换
    reGetLoginForm() {
      let form = {}
      form.grant_type = GRANT_TYPE.SMS_CAPTCHA
      form.username = this.reLoginForm.phone
      form.captcha_code = this.reLoginForm.captcha_code
      form.captcha_key = this.captcha_key
      return form
    },
    //获取短信验证码
    getSMSCaptcha() {
      if (this.countDown < 0) {
        this.smsLoading = true
        getSMSCaptcha({ phone: this.reLoginForm.phone })
          .then((res) => {
            if (res.status) {
              this.captcha_key = res.data
              this.updataCountDown()
            }
          })
          .catch((err) => {
            this.$message.error(err.response.data.message)
            this.updataCountDown()
          })
      }
    },
    //更新获取验证码时间
    updataCountDown() {
      this.smsLoading = false
      this.countDown = 60
      const count = setInterval(() => {
        if (this.countDown == 0) {
          clearInterval(count)
          this.countDown = -1
        } else {
          this.countDown--
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-logo {
  width: 100px;
}

::v-deep .login-tel {
  .fks-input__inner {
    background: url('../../assets/img/login/login-tel.png') no-repeat 5px center;
  }
}

::v-deep .login-tel_code {
  .fks-input__inner {
    background: url('../../assets/img/login/login-tel_code.png') no-repeat 5px
      center;
  }
}

::v-deep .phone_code {
  .fks-input-group__append {
    border: none;
    border-bottom: 1px solid rgba(225, 226, 228, 1);
    border-radius: 0;
    background: rgba(255, 255, 255, 0);

    button {
      padding-right: 0;
      font-size: 14px;
    }
  }
}

.login-button-container {
  margin-top: 64px;

  ::v-deep .fks-button {
    width: 100%;
    height: 55px;
    font-size: 18px;
  }

  .back {
    font-size: 14px !important;
    margin: 0;
  }
}
</style>
